<template >
    <div>
        <el-form :inline="true" :model="formInline" ref="formInline" class="demo-form-inline" style="float: left;text-align: left">
            <el-form-item label="订单编号">
                <el-input v-model="formInline.orderId"></el-input>
            </el-form-item>
            <el-form-item label="车牌号">
                <el-input v-model="formInline.carNum"></el-input>
            </el-form-item>
            <el-form-item label="活动时间">
                <el-col :span="11">
                    <el-date-picker type="date" placeholder="选择日期" v-model="formInline.beginDate"
                        style="width: 100%;"></el-date-picker>
                </el-col>
                <el-col class="line" :span="2">-</el-col>
                <el-col :span="11">
                    <el-date-picker type="date" placeholder="选择日期" v-model="formInline.endDate"
                        style="width: 100%;"></el-date-picker>
                </el-col>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
                <!-- <el-button type="primary">导出</el-button> -->
                <el-button type="primary" @click="exportToExcel">批量导出</el-button>
            </el-form-item>
        </el-form>

        <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
            @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column prop="orderId" label="订单编号" width="120">
            </el-table-column>
            <el-table-column prop="orderDate" label="订单日期" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="carNum" label="车牌号" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="carType" label="车型" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="beginTime" label="开始充电时间" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="rechargeMins" label="充电时长" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="rechargeNum" label="充电量" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="money" label="充电费用" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="payment" label="实付金额" show-overflow-tooltip>
            </el-table-column>
        </el-table>

        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="formInline.pageIndex" :page-sizes="[2, 4, 6, 8]" :page-size="formInline.pageSize"
            layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>

    </div>
</template>
<script>
import { getrechargeapi } from '@/api/area/Recharge'
import { export_json_to_excel } from "@/excel/Export2Excel"
export default {
    data() {
        return {
            tableData: [],
            selectList: [],
            formInline: {
                pageIndex: 1,
                pageSize: 2,
                orderId: "",
                carNum: "",
                beginDate: "",
                endDate: "",
            },
            total: 0,
            multipleTable: []
        }
    },
    created() {
        this.loadCar()
    },
    methods: {
        loadCar() {
            getrechargeapi(this.formInline).then(res => {
                this.tableData = res.data.data
                this.total = res.data.totalCount
            })
        },
        //复选框勾选方法
        handleSelectionChange(val) {
            this.multipleTable = val
        },
        onSubmit() {
            this.loadCar()
        },
        //每页显示条数
        handleSizeChange(val) {
            this.formInline.pageSize = val;
            this.loadCar()
        },
        //当前页
        handleCurrentChange(val) {
            this.formInline.pageIndex = val;
            this.loadCar()
        },
        //跳转到添加页面
        //   addCar() {
        //     this.$router.push('AddCar')
        //   },
       // ----------以下为导出Excel数据功能--------------
    exportToExcel() {
      //excel数据导出
      require.ensure([], () => {
        const tHeader = [
          "订单编号",
          "订单日期",
          "车牌号",
          "车型",
          "开始充电时间",
          "充电时长",
          "充电量",
          "充电费用",
          "实付金额",
        ];
        const filterVal = [
          "orderId",
          "orderDate",
          "carNum",
          "carType",
          "beginTime",
          "rechargeMins",
          "rechargeNum",
          "money",
          "payment",
        ];
        const list = this.tableData;//导出这个list集合对象
        const data = this.formatJson(filterVal, list);
        export_json_to_excel(tHeader, data, "学生列表excel");
      });
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) => filterVal.map((j) => v[j]));
    },
    }
}
</script>
<style ></style>